<template>
    <rx-popover class="rx-select" type="fixed" :tabindex="-1" placement="bottom-start" ref="popover"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)" 
    >
        <rx-icon name="rx-select"/>
        <rx-icon class="clearicon" name="rx-clear" @click="clearValue" 
            v-if="!required&&value"/>
        <div class="select-value" 
        :class="{
          placeholder
        }">{{label||placeholder}}</div>
        <div slot="popover">
           <slot name="prefix"></slot>
           <ul class="select-list">
             <!-- 默认放option -->
              <slot></slot>
              <li class="select-list__item-nodata" v-if="optionNum===0">暂无数据。</li>
           </ul>
           <slot name="suffix"></slot>
        </div>
    </rx-popover>
</template>
<script>
export default {
  name: "rx-select",
  provide() {
    return {
      select: this
    };
  },
  props: {
    placeholder: {
      type: String,
      default() {
        return "请选择";
      }
    },
    value: {},
    disabled: {
      type: Boolean,
      default() {
        return false;
      }
    },
    required: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      default() {
        return undefined;
      }
    }
  },
  data() {
    return {
      label: "",
      optionNum: 0,
      inFocus:false
    };
  },
  methods: {
    onFocus($event){
      this.inFocus=true;
      this.$emit('focus', $event)
    },
    updateValue(nval, label, item) {
      this.$emit("input", nval);
      if (this.value !== nval) {
        this.$emit("change", item);
        this.label = label;
      }
      // this.$refs.popover.$el.blur();
      this.$refs.popover.hide();
    },
    clearValue(ev) {
      //接口上是不是可以不传值，如果是必须要传，那清空操作要加一个默认值
      ev.stopPropagation();
      this.$emit("input", this.defaultValue);
      if (this.value) {
        this.$emit("change");
        this.label = "";
      }
      // this.$refs.popover.$el.blur();
    }
  }
};
</script>
<style lang="scss">
.rx-select {
  outline: none;
  position: relative;
  display: inline-block;
  font-size: 14px;
  width: 100%;

  &[disabled] {
    cursor: not-allowed;
    background-color: #f5f7fa;
  }

  .select-value {
    cursor: default;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #d9e1f1;
    box-sizing: border-box;
    color: #333;
    outline: none;
    padding: 8px 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    padding-right: 30px;

    &.placeholder{
      user-select: none;
    }
  }
  .rx-icon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    color: gray;
    right: 10px;

    &.clearicon {
      display: none;
      //覆盖在suffixicon上面
      z-index: 1;
      background: #fff;
    }
  }
  .select-list {
    list-style-type: none;
    padding: 6px 0;
    overflow: auto;
    max-height: calc(50vh - 40px);
    background-color: #fff;

    border: 1px solid #dee4ee;
    border-radius: 4px;
  }
  .select-list__item-nodata {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
  }

  &:focus{
    .select-value {
      border-color: #6772e4;
      outline: #d0d4ff;
    }
    .clearicon{
      display: inline;
    }
  }
  &:hover{
    .clearicon{
      display: inline;
    }
  }
}
</style>


